@duration: 0.3s;

.switch-bg(@color) {
  background-color: var(~'--bui-color-@{color}');
}

.bui-switch {
  --bg-color: var(--bui-switch-bg-color, #ccc);
  --padding: var(--bui-switch-padding, 0);
  --border-radius: var(--bui-switch-border-radius, 15px);
  --small-width: var(--bui-switch-small-width, 24px);
  --small-height: var(--bui-switch-small-height, 16px);
  --small-font-size: var(--bui-switch-small-font-size, 9px);
  --controller-small-width: var(--bui-switch-controller-small-width, 12px);
  --controller-small-height: var(--bui-switch-controller-small-height, 12px);
  --medium-width: var(--bui-switch-medium-width, 44px);
  --medium-height: var(--bui-switch-medium-height, 22px);
  --controller-medium-width: var(--bui-switch-controller-medium-width, 18px);
  --controller-medium-height: var(--bui-switch-controller-medium-height, 18px);
  --large-width: var(--bui-switch-large-width, 51px);
  --large-height: var(--bui-switch-large-height, 30px);
  --controller-large-width: var(--bui-switch-controller-large-width, 24px);
  --controller-large-height: var(--bui-switch-controller-large-height, 24px);

  position: relative;
  display: inline-block;
  box-sizing: border-box;
  padding: var(--padding);
  vertical-align: middle;
  border-radius: var(--border-radius);
  background-color: var(--bg-color);
  transition: all @duration cubic-bezier(0.35, 0, 0.25, 1);
  font-family: var(--bui-font-family);

  &::after {
    position: absolute;
    left: 2px;
    top: 2px;
    border-radius: 50%;
    background-color: #fff;
    content: ' ';
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
    transition: left @duration cubic-bezier(0.35, 0, 0.25, 1);
    animation-timing-function: cubic-bezier(0.35, 0, 0.25, 1);
    animation-duration: @duration;
  }

  &:focus {
    outline: none;
  }

  // 尺寸
  &-small {
    width: var(--small-width);
    height: var(--small-height);

    .bui-switch-inner {
      left: calc(100% - 10px);
      font-size: var(--font-size-smal);
    }

    &::after {
      width: var(--controller-small-width);
      height: var(--controller-small-height);
      left: 2px;
      top: 2px;
    }

    &.bui-switch-checked {
      &::after {
        left: calc(100% - 14px);
      }

      .bui-switch-inner {
        left: 2px;
      }
    }
  }

  &-medium {
    width: var(--medium-width);
    height: var(--medium-height);

    &::after {
      width: var(--controller-medium-width);
      height: var(--controller-medium-height);
    }

    &.bui-switch-checked {
      &::after {
        left: calc(100% - 20px);
      }

      .bui-switch-inner {
        left: var(--bui-spacing-sm);
      }
    }
  }

  &-large {
    width: var(--large-width);
    height: var(--large-height);

    .bui-switch-inner {
      left: calc(100% - 22px);
    }

    &::after {
      width: var(--controller-large-width);
      height: var(--controller-large-height);
      left: 3px;
      top: 3px;
    }

    &.bui-switch-checked {
      &::after {
        left: calc(100% - 27px);
      }

      .bui-switch-inner {
        left: var(--bui-spacing-sm);
      }
    }
  }

  // 颜色
  &-primary {
    &.bui-switch-checked {
      .switch-bg(primary);
    }
  }

  &-info {
    &.bui-switch-checked {
      .switch-bg(info);
    }
  }

  &-success {
    &.bui-switch-checked {
      .switch-bg(success);
    }
  }

  &-warning {
    &.bui-switch-checked {
      .switch-bg(warning);
    }
  }

  &-danger {
    &.bui-switch-checked {
      .switch-bg(danger);
    }
  }

  &-inner {
    position: absolute;
    left: calc(100% - 20px);
    color: var(--bui-color-white);
    font-size: var(--bui-text-size-3);
    height: 100%;
    display: flex;
    align-items: center;

    .bui-svg-icon {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }
  }

  &-disabled {
    pointer-events: none;
    opacity: 0.5;

    &::after {
      animation-name: none;
      cursor: not-allowed;
    }
  }

  &-input {
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    position: absolute;
    z-index: 1;
    cursor: pointer;
  }
}
